<template>
  <div class="aside">
    <el-container class="content">
      <el-aside width="160px">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          text-color="#6B6B6B"
          :router="true"
          :default-openeds="openeds"
        >
          <!-- 订单中心 -->
          <el-submenu index="1">
            <template slot="title">
              <i class="iconfont icon-order order" />
              <span>订单中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/order">我的订单</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/choose-for-him">我为ta选的单</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/choose-for-mime">ta为我选的单</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/cart">我的购物车</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/collect">我的收藏</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/foot-mark">我的足迹</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/my-rate">我的评价</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <!-- 账户信息 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          text-color="#6B6B6B"
          :router="true"
          :default-openeds="openeds"
        >
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location" />
              <span>账户中心</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/base-info-set">账户信息</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/change-password">修改密码</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/deliver-address">收货地址</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/message-center">消息中心</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/primary-account">我的主账号</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item index="/bypass-account">我的子账号</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
        <!-- 我监管的账号 -->
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          text-color="#6B6B6B"
          :router="true"
          :default-openeds="openeds"
        >
          <el-submenu index="3">
            <template slot="title">
              <i class="iconfont icon-business business" />
              <span>我监管的账号</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/regulatory-order">监管账号订单</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <el-menu-item
                index="/regulatory-budget-orders"
              >监管账号预选单</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Aside',
  data() {
    return {
      openeds: ['1', '2', '3']
    }
  },
  methods: {
    handleOpen() {
      console.log(this)
    }
  }
}
</script>

<style scoped lang="scss">
.el-menu-item {
  min-width: 160px;
height: 40px;
line-height: 40px;
text-align: left;
}
.aside {
  background-color: #f7f7f7;
}
.content {
  width: 1200px;
  margin: 0 auto;
  padding: 33px 0 60px 0;
}
.order{

}
.business{
  font-size: 18px;
}
::v-deep .el-submenu__title {
  width: 160px;
  background-color: #fff;
 padding: 0 10px 0 10px!important;
 .el-icon-location{
   margin: 0;
     display: inline-block;
   width: 15px;
   height: 15px;

 }

 span{
   margin: 0 10px;
   display: inline-block;
   min-width: 100px;
   text-align: left;
 }
}
 ::v-deep .el-icon-location:before{
     display: inline-block;
     width: 15px!important;
   height: 15px!important;
 }
::v-deep .el-submenu {
  width: 160px;
  background-color: #fff;
}

::v-deep .el-menu-item-group__title{
display: none;

}
::v-deep .el-menu-item.is-active {
    color: #FF3B30;
    background-color: #FFDBD8;
}
.el-aside {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 200px;
  border-top: 4px solid #ff6969;
  margin-right: 17px;
  // overflow: scroll;
  overflow: hidden;
}

.el-main {
  background-color: #ffffff;
  color: #333;
   padding: 0;
   overflow: hidden;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
